---
title: 탭
description: Starlight에서 탭 인터페이스를 만들어 동등한 정보를 그룹화하는 방법을 알아보세요.
---

import { Tabs, TabItem } from '@astrojs/starlight/components';

탭 인터페이스를 만들려면 `<Tabs>` 및 `<TabItem>` 컴포넌트를 사용합니다.
탭은 사용자가 여러 옵션 중 하나만 확인해야 하는 경우 동등한 정보를 그룹화하는 데 유용합니다.

import Preview from '~/components/component-preview.astro';

<Preview>

<Tabs slot="preview">
	<TabItem label="별">시리우스, 베가, 베텔게우스</TabItem>
	<TabItem label="달">이오, 유로파, 가니메데</TabItem>
</Tabs>

</Preview>

## 가져오기

```tsx
import { Tabs, TabItem } from '@astrojs/starlight/components';
```

## 사용

탭 인터페이스는 `<Tabs>` 및 `<TabItem>` 컴포넌트를 사용하여 표시합니다.
각 `<TabItem>`에는 사용자에게 표시할 [`label`](#label)이 있어야 합니다.

<Preview>

```mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
	<TabItem label="별">시리우스, 베가, 베텔게우스</TabItem>
	<TabItem label="달">이오, 유로파, 가니메데</TabItem>
</Tabs>
```

<Fragment slot="markdoc">

```markdoc
{% tabs %}
{% tabitem label="별" %}
시리우스, 베가, 베텔게우스
{% /tabitem %}

{% tabitem label="달" %}
이오, 유로파, 가니메데
{% /tabitem %}
{% /tabs %}
```

</Fragment>

<Tabs slot="preview">
	<TabItem label="별">시리우스, 베가, 베텔게우스</TabItem>
	<TabItem label="달">이오, 유로파, 가니메데</TabItem>
</Tabs>

</Preview>

### 탭 동기화

[`syncKey`](#synckey) 속성을 추가하여 여러 탭 그룹을 동기화된 상태로 유지합니다.

`syncKey` 값이 같은 페이지의 모든 `<Tabs>`는 동일한 활성 레이블을 표시합니다.
이렇게 하면 독자가 운영 체제나 패키지 관리자 등을 한 번 선택하면 페이지 탐색 간 선택한 내용이 유지되는 것을 확인할 수 있습니다.

관련 탭을 동기화하려면 각 `<Tabs>` 컴포넌트에 동일한 `syncKey` 속성을 추가하고 모두 동일한 `<TabItem>` 레이블을 사용하는지 확인하세요.

<Preview>

```mdx 'syncKey="별자리"'
import { Tabs, TabItem } from '@astrojs/starlight/components';

_별:_

<Tabs syncKey="별자리">
	<TabItem label="오리온자리">벨라트릭스, 리겔, 베텔게우스</TabItem>
	<TabItem label="쌍둥이자리">폴룩스, 캐스터 A, 캐스터 B</TabItem>
</Tabs>{' '}

_외계 행성:_

<Tabs syncKey="별자리">
	<TabItem label="오리온자리">HD 34445 b, 글리제 179 b, Wasp-82 b</TabItem>
	<TabItem label="쌍둥이자리">폴룩스 b, HAT-P-24b, HD 50554 b</TabItem>
</Tabs>
```

<Fragment slot="markdoc">

```markdoc 'syncKey="별자리"'
_별:_

{% tabs syncKey="별자리" %}
{% tabitem label="오리온자리" %}
벨라트릭스, 리겔, 베텔게우스
{% /tabitem %}

{% tabitem label="쌍둥이자리" %}
폴룩스, 캐스터 A, 캐스터 B
{% /tabitem %}
{% /tabs %}

_외계 행성:_

{% tabs syncKey="별자리" %}
{% tabitem label="오리온자리" %}
HD 34445 b, 글리제 179 b, Wasp-82 b
{% /tabitem %}

{% tabitem label="쌍둥이자리" %}
폴룩스 b, HAT-P-24b, HD 50554 b
{% /tabitem %}
{% /tabs %}
```

</Fragment>

<Fragment slot="preview">

_별:_

<Tabs syncKey="별자리">
	<TabItem label="오리온자리">벨라트릭스, 리겔, 베텔게우스</TabItem>
	<TabItem label="쌍둥이자리">폴룩스, 캐스터 A, 캐스터 B</TabItem>
</Tabs>{' '}

_외계 행성:_

<Tabs syncKey="별자리">
	<TabItem label="오리온자리">HD 34445 b, 글리제 179 b, Wasp-82 b</TabItem>
	<TabItem label="쌍둥이자리">폴룩스 b, HAT-P-24b, HD 50554 b</TabItem>
</Tabs>

</Fragment>

</Preview>

### 탭에 아이콘 추가

[Starlight의 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 [`icon`](#icon) 속성을 사용하여 탭 항목에 아이콘을 포함하면 레이블 옆에 아이콘이 표시됩니다.

<Preview>

```mdx /icon="\w+"/
import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
	<TabItem label="별" icon="star">
		시리우스, 베가, 베텔게우스
	</TabItem>
	<TabItem label="달" icon="moon">
		이오, 유로파, 가니메데
	</TabItem>
</Tabs>
```

<Fragment slot="markdoc">

```markdoc /icon="\w+"/
{% tabs %}
{% tabitem label="별" icon="star" %}
시리우스, 베가, 베텔게우스
{% /tabitem %}

{% tabitem label="달" icon="moon" %}
이오, 유로파, 가니메데
{% /tabitem %}
{% /tabs %}
```

</Fragment>

<Tabs slot="preview">
	<TabItem label="별" icon="star">
		시리우스, 베가, 베텔게우스
	</TabItem>
	<TabItem label="달" icon="moon">
		이오, 유로파, 가니메데
	</TabItem>
</Tabs>

</Preview>

## `<Tabs>` 속성

**구현:** [`Tabs.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Tabs.astro)

`<Tabs>` 컴포넌트는 여러 개의 `<TabItem>` 컴포넌트를 그룹화하고 다음과 같은 속성을 허용합니다:

### `syncKey`

**타입:** `string`

여러 페이지에서 여러 탭 그룹을 동기화하는 데 사용되는 키입니다.

## `<TabItem>` 속성

**구현:** [`TabItem.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/TabItem.astro)

탭 세트는 탭 항목으로 구성되며, 각 항목에는 다음과 같은 속성이 있습니다:

### `label`

**필수**  
**타입:** `string`

탭 항목에는 탭에 표시될 텍스트로 설정된 `label` 속성이 포함되어야 합니다.

### `icon`

**타입:** `string`

각 탭 항목에는 [Starlight의 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 `icon` 속성을 포함하여 레이블 옆에 아이콘을 표시할 수 있습니다.
